@import "common";
.banner {
    font-size: 0;
    position: relative;
    width: r(640px);
    height: r(347px);
    >img {
        width: r(640px);
        height: r(347px);
    }
    .mask {
        position: absolute;
        width: r(640px);
        height: r(104px);
        background: rgba(0, 0, 0, 0.5);
        bottom: 0;
        text-align: center;
        color: white;
        >p {
            display: inline-block;
            font-size: r(26.79px);
            margin-top: r(20px);
        }
        .red-bg {
            background: #b20000;
            margin-right: r(6px);
        }
        .point {
            margin-top: r(11px);
            width: r(73px);
            height: r(11px);
            position: absolute;
            left: r(640px)/2 - r(37px);
            ul li {
                float: left;
                color: white;
                font-size: r(26px);
                margin-left: r(24px);
                &:first-of-type {
                    color: red;
                }
            }
        }
    }
}

section {
    font-size: 0;
    width: r(584px);
    height: r(1107px);
    padding-bottom: r(18px);
    .list {
        >li {
            float: left;
            margin-right: r(19px);
            margin-bottom: r(20px);
            &:nth-of-type(2n) {
                margin-right: 0;
            }
            &:nth-of-type(5),
            &:nth-of-type(6) {
                margin-bottom: 0;
            }
            &:nth-of-type(1),
            &:nth-of-type(2) {
                margin-top: r(18px);
            }
        }
        .list-item {
            font-size: 0;
            width: r(282px);
            height: r(343px);
            background: honeydew;
            >img {
                width: r(282px);
                height: r(182px);
                margin-bottom: r(14px);
            }
            >p {
                font-size: r(21px);
                margin-bottom: r(13px);
            }
            .icon {
                li{
                    float: left;
                }
                .kind{
                    margin-left: r(6px);
                    margin-right: r(32px);
                    width: r(88px);
                    height: r(27px);
                    background: #b20000;
                    color: white;
                    border-radius: r(5px);
                    font-size: r(18px);
                    text-align: center;
                    line-height: r(27px);
                }
                .heart {
                    margin-right: r(16px);
                    color: $icon-color;
                    .heart-icon {
                        font-size: r(18px);
                        margin-right: r(6px);
                    }
                    >span {
                        font-size: r(17.76px);
                    }
                }
                .view {
                    color: $icon-color;
                    .icon-view {
                        font-size: r(23px);
                        margin-right: r(6px);
                        vertical-align: middle;
                    }
                    >span {
                        font-size: r(17.76px);
                        vertical-align: middle;
                    }
                }
            }
           
                .author-img{
                    font-size: 0;
                    margin-top: r(14px);
                    color: $icon-color;
                    float: left;
                    width: r(255px);
                    height: r(35px);
                    img{
                        width: r(35px);
                        height: r(35px);
                        margin-right: r(8px);
                        vertical-align: middle;
                    }
                    p{
                        display: inline-block;
                        font-size: r(18px);
                        vertical-align:middle;
                      
                    }
                    .date{
                     
                       display: inline-block;
                       margin-left: r(8px);
                    }
                    
                }
            
        }
    }
}
.wrap{
    height: r(1630.9px);
}
